<template>
  <view>
    <!--新增/修改 企业客户-->
    <view v-if="type == 0">
      <uni-notice-bar single color="#00a660" background-color="#e6f6ef" :text="titleBar"/>
      <view class="modify_form">
        <uni-forms
            ref="form"
            :modelValue="form"
            :rules="rules"
            :label-width="90" type="line" label-align="right"
            class="paddingAll">
          <uni-forms-item label="企业名称" name="name" required>
            <uni-easyinput placeholder="请输入企业名称" maxlength="50" v-model="form.name" :disabled="form.isCertify == 1"/>
          </uni-forms-item>
          <uni-forms-item label="企业法人" name="leader" required>
            <uni-easyinput placeholder="请输入企业法人" maxlength="30" v-model="form.leader" :disabled="form.isCertify == 1"/>
          </uni-forms-item>
          <uni-forms-item label="统一社会信用代码" name="creditCode" required>
            <uni-easyinput placeholder="请输入统一社会信用代码" maxlength="18" v-model="form.creditCode"
                           :disabled="form.isCertify == 1"/>
          </uni-forms-item>
          <uni-forms-item label="客户类别" name="customerType" required>
            <uni-data-select
                placeholder="请选择证件类型"
                v-model="form.customerType"
                :localdata="dicts.ec_customer_type"
                :clear="false"/>
          </uni-forms-item>
          <uni-forms-item label="发票类型" name="invoiceType">
            <uni-data-select
                placeholder="请选择发票类型"
                v-model="form.invoiceType"
                :localdata="dicts.ec_invoice_type"
                :clear="false"/>
          </uni-forms-item>
          <uni-forms-item label="开户银行名称" name="bankName">
            <uni-easyinput placeholder="请输入开户银行名称" maxlength="50" v-model="form.bankName"/>
          </uni-forms-item>
          <uni-forms-item label="开户支行名称" name="bankSonName">
            <uni-easyinput placeholder="请输入开户支行名称" maxlength="50" v-model="form.bankSonName"/>
          </uni-forms-item>
          <uni-forms-item label="企业对公账户" name="account">
            <uni-easyinput placeholder="请输入企业对公账户" maxlength="50" v-model="form.account"/>
          </uni-forms-item>
          <uni-forms-item label="企业联系电话" name="invoiceTelephone">
            <uni-easyinput placeholder="请输入企业联系电话" maxlength="30" v-model="form.invoiceTelephone"/>
          </uni-forms-item>
          <uni-forms-item label="企业邮箱账号" name="email">
            <uni-easyinput placeholder="请输入企业邮箱账号" maxlength="100" v-model="form.email"/>
          </uni-forms-item>
          <uni-forms-item label="企业所在地址" name="invoiceAddress">
            <uni-easyinput placeholder="请输入企业所在地址" maxlength="100" v-model="form.invoiceAddress"/>
          </uni-forms-item>
          <uni-forms-item label="备注" name="remark">
            <uni-easyinput type="textarea" placeholder="请输入备注，长度不超过200个汉字" maxlength="200" v-model="form.remark"/>
          </uni-forms-item>
        </uni-forms>

        <view class="submit_btn">
          <button size="mini" class="back-Btn" @click="cancel">取消</button>
          <button size="mini" class="next-Btn" @click="submitForm">确定</button>
        </view>
      </view>
    </view>
    <!--详情 企业客户-->
    <view v-else>
      <uni-card title="基本信息" :is-shadow="false">
        <p class="grid-integral">企业名称：{{ dataDetails.name }}
          <companyGreen v-if="dataDetails.isCertify == 1" class="certiyImg"/>
          <companyGray v-if="dataDetails.isCertify == 0" class="certiyImg"/>
        </p>
        <p class="grid-integral">企业法人：{{ dataDetails.leader }}</p>
        <p class="grid-integral">统一社会信用代码：{{ dataDetails.creditCode }}</p>
        <p class="grid-integral">企业所在地址：{{ dataDetails.invoiceAddress }}</p>
        <p class="grid-integral">企业联系电话：{{ dataDetails.invoiceTelephone }}</p>
        <p class="grid-integral">客户类别：
          <template v-for="(dictItem, index) in dicts.ec_customer_type">
            <template v-if="dataDetails.customerType == dictItem.value">
              <uni-tag :text="dictItem.text" size="small" :type="dictItem.type"/>
            </template>
          </template>
        </p>
        <p class="grid-integral">备注：{{ dataDetails.remark }}</p>
        <p class="grid-integral">变更时间：{{ dataDetails.updateTime }}</p>
        <p class="grid-integral">创建时间：{{ dataDetails.createTime }}</p>
        <p class="grid-integral">黑名单：
          <template v-for="(dictItem, index) in dicts.ec_is_black_list">
            <template v-if="dataDetails.status == dictItem.value">
              <uni-tag :text="dictItem.text" size="small" :type="dictItem.type"/>
            </template>
          </template>
        </p>
      </uni-card>
      <uni-card title="企业发票信息" :is-shadow="false">
        <p class="grid-integral">发票类型：
          <template v-for="(dictItem, index) in dicts.ec_invoice_type">
            <template v-if="dataDetails.invoiceType == dictItem.value">
              <uni-tag :text="dictItem.text" size="small" :type="dictItem.type"/>
            </template>
          </template>
        </p>
        <p class="grid-integral">发票抬头：{{ dataDetails.name }}</p>
        <p class="grid-integral">企业税号：{{ dataDetails.creditCode }}</p>
        <p class="grid-integral">开户银行名称：{{ (!!dataDetails.bankName) ? dataDetails.bankName : '--' }}</p>
        <p class="grid-integral">企业银行账号：{{ (!!dataDetails.account) ? dataDetails.account : '--' }}</p>
        <p class="grid-integral">企业邮箱账号：{{ (!!dataDetails.email) ? dataDetails.email : '--' }}</p>
        <p class="grid-integral">企业联系电话：{{ (!!dataDetails.invoiceTelephone) ? dataDetails.invoiceTelephone : '--' }}</p>
        <p class="grid-integral">企业所在地址：{{ (!!dataDetails.invoiceAddress) ? dataDetails.invoiceAddress : '--' }}</p>
      </uni-card>
      <uni-card title="企业对公账户信息" :is-shadow="false">
        <p class="grid-integral">开户银行名称：{{ (!!dataDetails.bankName) ? dataDetails.bankName : '--' }}</p>
        <p class="grid-integral">开户支行名称：{{ (!!dataDetails.bankSonName) ? dataDetails.bankSonName : '--' }}</p>
        <p class="grid-integral">企业账户名称：{{ (!!dataDetails.name) ? dataDetails.name : '--' }}</p>
        <p class="grid-integral">企业银行账号：{{ (!!dataDetails.account) ? dataDetails.account : '--' }}</p>
      </uni-card>
    </view>
  </view>
</template>

<script>

import {addCustomerCompany, updateCustomerCompany} from "@/api/ec/person/customer/customerCompany";
import {getDictsByNameForUni} from "@/utils/dicts";
import companyGreen from "@/components/svg/companyGreen"
import companyGray from "@/components/svg/companyGreen"

export default {
  props: {},
  components: {companyGreen, companyGray,},
  data() {
    return {
      // 数据字典
      dicts: {
        ec_customer_type: [],
        ec_invoice_type: [],
        ec_certify_status: [],
        ec_is_black_list: [],
      },
      // 类型 0:新增/修改,1:详情
      type: 0,
      // 详细数据
      dataDetails: null,
      // 标题
      titleBar: "",
      // 表单
      form: {},
      // 登录密码校验
      rules: {
        name: {
          rules: [
            {required: true, errorMessage: '请输入企业名称！'},
            {min: 2, max: 50, errorMessage: '企业名称长度需要在2-50个汉字或字符之间，不能包含特殊字符',},
          ]
        },
        leader: {
          rules: [
            {required: true, errorMessage: '请输入企业法人'},
            {min: 2, max: 30, errorMessage: '企业法人长度需要在2-30个汉字或字符之间，不能包含特殊字符'},
          ]
        },
        creditCode: {
          rules: [
            {required: true, errorMessage: '请输入统一社会信用代码！'},
            {
              pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
              message: "请输入正确的统一社会信用代码",
            }
          ]
        },
        customerType: {
          rules: [
            {required: true, errorMessage: '请选择客户类别！'},
          ]
        },
      },
    };
  },
  onLoad(option) {
    if (!!option.dataDetails) {
      this.dataDetails = JSON.parse(option.dataDetails);
    }
    this.type = option.type;
  },
  created() {
    this.getDicts();
    if (this.type == 0) {
      this.initModifyView();
    }
  },
  methods: {
    /**加载数据字典*/
    getDicts() {
      this.dicts.ec_customer_type = getDictsByNameForUni("ec_customer_type");
      this.dicts.ec_invoice_type = getDictsByNameForUni("ec_invoice_type");
      this.dicts.ec_certify_status = getDictsByNameForUni("ec_certify_status");
      this.dicts.ec_is_black_list = getDictsByNameForUni("ec_is_black_list");
    },
    /** 初始化 修改/添加 页面  */
    initModifyView() {
      if (!!this.dataDetails) {
        this.titleBar = "修改企业信息资料";
        this.form = {
          id: this.dataDetails.id,
          isCertify: this.dataDetails.isCertify,
          name: this.dataDetails.name,
          leader: this.dataDetails.leader,
          creditCode: this.dataDetails.creditCode,
          customerType: this.dataDetails.customerType,
          invoiceType: this.dataDetails.invoiceType,
          bankName: this.dataDetails.bankName,
          bankSonName: this.dataDetails.bankSonName,
          account: this.dataDetails.account,
          invoiceTelephone: this.dataDetails.invoiceTelephone,
          email: this.dataDetails.email,
          invoiceAddress: this.dataDetails.invoiceAddress,
          remark: this.dataDetails.remark,
        };
      } else {
        this.titleBar = "添加企业信息资料";
        this.form = {};
      }
    },
    cancel() {
      uni.navigateBack({delta: 1});
    },
    /** 修改登录密码,确定按钮 */
    submitForm() {
      this.$refs.form.validate().then(valid => {
        if (valid) {
          uni.showLoading({title: '加载中...', mask: true});
          if (this.form.id != null) {
            updateCustomerCompany(this.form).then(response => {
              uni.hideLoading()
              this.$modal.msgSuccess("修改成功");
              setTimeout(() => {
                this.cancel();
                uni.$emit('refreshCustomerCompany');
              }, 300)
            }).catch(() => {
              uni.hideLoading()
            });
          } else {
            addCustomerCompany(this.form).then(response => {
              uni.hideLoading()
              this.$modal.msgSuccess("新增成功");
              setTimeout(() => {
                this.cancel();
                uni.$emit('refreshCustomerCompany');
              }, 300)
            }).catch(() => {
              uni.hideLoading()
            });
          }
        }
      });
    },
  }
};
</script>
<style scoped lang="scss">
.certiyImg {
  width: 30rpx;
  height: 30rpx;
  margin-left: 6rpx;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 8rpx;
}

.modify_form {
  padding: 0 30rpx 0 20rpx;
  position: relative;
}

page {
  background: $uni-bg-color;
}

.submit_btn {
  display: flex;
  margin-top: 50rpx;
  padding-bottom: 50rpx;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;

  button {
    width: 40%;
    font-size: 28rpx;
  }

  .next-Btn {
    background-color: $uni-color-primary;
    border-radius: 10rpx;
    color: #fff;
  }

  .back-Btn {
    border-radius: 10rpx;
    border: solid 1rpx $uni-color-primary;
    color: $uni-color-primary;
    background: #fff;
  }

}
</style>
